<!--
	单体建筑物易损性数量
	Created by Penglei on 2023/08/10
-->
<template>
	<div class="single-building">
		<div class="single-building-content">
			<div class="single-building-content-title">总数</div>
			<div class="single-building-content-number">{{ total }}</div>
			<div class="single-building-content-shadown"></div>
		</div>
		<div v-for="(item, index) in arrList" :key="index" :class="['single-building-top', 'top' + (index + 1)]">
			<div class="top"><span>top{{ curIndex + index + 1 }}</span></div>
			<div class="bottom">
				<span>{{ item.province || '' }}</span>&nbsp;
				<span>{{ item.sum || 0 }}</span>
			</div>
		</div>
	</div>
</template>

<script setup name="SingleBuilding">
import { computed, onMounted, onUnmounted, ref } from "vue";
// 引入接口
import { getSingleBuildingApi } from '@/api/vulnerability'

// 列表数据
let arrList = ref([]);
// 总数
let total = ref(0);

// 所有省份数据
let arrAllProvince = [];
// 当前索引
let curIndex = ref(0);
// 结束索引，默认取4个
let endIndex = computed(() => curIndex.value + 4);
// 切换时间间隔
const interval = 10000;
// 定时器
let timer = null;
// 定时切换方法
const timedSwitching = () => {
	timer = setInterval(() => {
		// 设置起始索引
		curIndex.value = endIndex.value >= arrAllProvince.length ? 0 : endIndex.value;
		// 设置列表数据
		arrList.value = arrAllProvince.slice(curIndex.value, endIndex.value);
	}, interval)
}
// 关闭定时器
const colseInterval = () => {
	clearInterval(timer);
	timer = null;
}
// 加载数据
const getData = () => {
	getSingleBuildingApi().then(res => {
		const { code, data } = res;
		if (code == 200 && data) {
			// 总数
			total.value = data.all || 0;
			// 列表
			const { cztMonomerBuildNums } = data;
			arrAllProvince = cztMonomerBuildNums || [];
			// 设置列表数据
			arrList.value = arrAllProvince.slice(curIndex.value, endIndex.value);
			// 定时切换
			timedSwitching();
		}
	}).catch(err => {
		console.log(err.message);
	})
}

// 挂载
onMounted(() => {
	// 加载数据
	getData();
});
// 卸载后
onUnmounted(() => {
	// 关闭定时器
	colseInterval();
});
</script>

<style lang="scss" scoped>
.single-building {
	position: relative;

	&-content {
		width: 268px;
		height: 174px;
		background: url('@/assets/images/vulnerability/bg_total.png') no-repeat center;
		background-size: 100% 100%;
		margin: 20px auto auto;
		padding-top: 25px;
		text-align: center;

		&-title {
			height: 18px;
			line-height: 18px;
			font-size: 18px;
			color: #FFFFFF;
		}

		&-number {
			font-size: 35px;
			font-weight: bold;
			color: #7DE7FF;
		}

		&-shadown {
			position: relative;
			width: 50px;
			height: 10px;
			margin: -12px auto 0;
			border-radius: 40%;
			background: radial-gradient(rgb(28, 137, 161), transparent);
			z-index: -1;
		}
	}

	&-top {
		position: absolute;
		min-width: 60px;
		height: 35px;
		padding: 2px;
		font-size: 14px;
		color: #FFFFFF;
		background: linear-gradient(180deg, rgba(23, 109, 191, 0.8) 0%, rgba(18, 63, 108, 0.85) 34%, rgba(21, 38, 108, 0.9) 100%);

		.top {
			height: 16px;
			font-size: 10px;
			color: #050426;
			border-bottom: 1px solid #46ffff1f;

			span {
				width: 30px;
				height: 12px;
				padding: 0 2px;
				background: linear-gradient(134deg, #7DE7FF 0%, #00CFFF 50%, #7DE7FF 100%);
			}
		}

		.bottom {
			height: 18px;
			line-height: 18px;
			display: flex;
			justify-content: space-between;

			span:first-child {
				font-size: 10px;
			}
		}
	}

	.top1 {
		top: 22px;
		left: 16px;
	}

	.top2 {
		top: 134px;
		left: 77px;
	}

	.top3 {
		top: 102px;
		right: 30px;
	}

	.top4 {
		top: 0;
		right: 20px;
	}
}
</style>